<template>
  <div>
    <!-- 第一层：顶部开始 -->
    <van-nav-bar
      fixed
      :border="false"
      right-text="设置"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #title>
        <van-search
          style="padding: 0"
          v-model="value"
          :left-icon="require('../assets/baking_log/search.png')"
          icon-size="12"
          placeholder="搜索我的食谱"
          @focus="$router.push('/search')"
        >
        </van-search>
      </template>
      <template #left>
        <van-icon
          @click="showPopup"
          :name="require('../assets/baking_log/more.png')"
          size="20"
        />
      </template>
    </van-nav-bar>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <div style="height: 46px"></div>
      <!-- 顶部结束 -->
      <!-- 弹出层开始 -->
      <van-popup
        position="bottom"
        :style="{ height: '30%' }"
        v-model="show"
        safe-area-inset-bottom
      >
        <van-grid clickable :column-num="2" :border="false" icon-size="100">
          <van-grid-item
            :icon="require('../assets/baking_log/upload.png')"
            text="上传食谱"
            to="/recipe"
          />
          <van-grid-item
            :icon="require('../assets/baking_log/issue.png')"
            text="发布作品"
            to="/edit"
          />
        </van-grid>
      </van-popup>
      <!-- 弹出层结束 -->
      <!-- 第二层：个人介绍 -->
      <van-cell is-link center class="personal" to="/profile">
        <template #title>
          <van-image
            round
            width="3rem"
            height="3rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />

          <span class="custom-title">{{ userInfo.uname }}</span>
          <van-tag type="warning">Lv.2</van-tag>
        </template>
      </van-cell>
      <!-- 第三层 -->
      <van-grid :column-num="3" v-if="data">
        <van-grid-item
          @click="checkfor('Focus')"
          :text="`关注：${data[0].focus}`"
        />
        <van-grid-item
          @click="checkfor('fans')"
          :text="`粉丝：${data[0].fans}`"
        />
        <van-grid-item
          @click="
            $dialog.alert({ title: '提示', message: '亲，该功能还未上线哦~~' })
          "
          :text="`帮贡：${0}`"
        />
      </van-grid>
      <!-- 第四层 -->
      <van-grid :column-num="4" :border="false">
        <van-grid-item
          :icon="require('../assets/login_logo/2.png')"
          text="作品"
          @click="checkme('edit')"
        />
        <van-grid-item
          :icon="require('../assets/login_logo/4.png')"
          text="食谱"
          @click="checkme('recipe')"
        />
        <!-- 收藏页面 -->
        <van-grid-item
          :icon="require('../assets/login_logo/6.png')"
          text="收藏"
          to="/collect"
        />
        <van-grid-item
          :icon="require('../assets/login_logo/1.png')"
          text="问答"
          @click="checkme('questions')"
        />
      </van-grid>
      <!-- 内容 -->
      <van-cell-group style="margin: 10px 0">
        <van-cell
          title="勋章库"
          is-link
          @click="
            $dialog.alert({ title: '提示', message: '亲，该功能还未上线哦~~' })
          "
          :icon="require('../assets/login_logo/13.png')"
        />
        <van-cell
          title="精彩活动"
          is-link
          @click="
            $dialog.alert({ title: '提示', message: '亲，该功能还未上线哦~~' })
          "
          :icon="require('../assets/login_logo/5.png')"
        />
        <van-cell
          title="每日签到"
          is-link
          @click="
            $dialog.alert({ title: '提示', message: '亲，该功能还未上线哦~~' })
          "
          :icon="require('../assets/login_logo/19.png')"
        />
        <van-cell
          title="我的课程"
          is-link
          @click="
            $dialog.alert({ title: '提示', message: '亲，该功能还未上线哦~~' })
          "
          :icon="require('../assets/login_logo/12.png')"
        />
      </van-cell-group>
      <van-cell-group>
        <van-cell
          title="浏览记录"
          is-link
          to="/history"
          :icon="require('../assets/login_logo/9.png')"
        />
        <van-cell
          title="达人申请"
          is-link
          to="/apply"
          :icon="require('../assets/login_logo/16.png')"
        />
        <van-cell
          title="帮贡兑换"
          is-link
          to="/exchange"
          :icon="require('../assets/login_logo/11.png')"
        />
      </van-cell-group>
    </van-pull-refresh>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      data: null,
      active: 0,
      value: "",
      isLoading: false,
      show: false,
    };
  },
  mounted() {
    this.count();
  },
  methods: {
    count() {
      let url = "f_count";
      let params = `user_id=${this.userInfo.uid}`;
      this.axios.post(url, params).then((res) => {
        // console.log(res);
        this.data = res.data.data;
      });
    },
    showPopup() {
      this.show = true;
    },
    onClickLeft() {},
    onClickRight() {
      return this.$router.push("/account");
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    checkme(val) {
      return this.$router.push({
        name: "ClientTds", //作品食谱问答
        params: {
          activeName: val,
        },
      });
    },
    checkfor(zhi) {
      //关注和粉丝
      return this.$router.push({
        name: "Follow",
        params: {
          activeNames: zhi,
        },
      });
    },
  },
  watch: {
    checkme(r, e) {},
  },
};
</script>

<style scoped>
:deep(.van-nav-bar__title) {
  max-width: 72%;
  /* padding-right: 1px; */
}
:deep(.van-search) {
  width: 80vw;
}
:deep(.van-icon__image) {
  margin-top: 4px;
}
:deep(.van-nav-bar__text) {
  color: #333;
}
/* .personal:deep(.van-cell__title) {
  position: relative;
} */
.van-cell__title > span:nth-child(2) {
  position: absolute;
  top: 12px;
  left: 75px;
  font-size: 16px;
  font-weight: bold;
}
.van-cell__title > span:nth-child(3) {
  position: absolute;
  top: 40px;
  left: 75px;
}
:deep(.van-nav-bar .van-icon) {
  color: #aaa;
}
</style>

<style lang="scss" scoped></style>
